<template>
    <section class="author">
        <article class="article-list">
        <!-- <ul class="category" v-if="category && category.length > 0">
            <li class="category-item" @click="getAllArticle">
            全部
            </li>
            <li v-for="(item, index) in category"
                :class="categoryIndex === index ? 'category-item category-item-active' : 'category-item'"
                @click="changCategory(item.id, index)"
                :key="item.id">
            <Icon v-if="item.type" class="icon" :style="{color: item.color}" :type="item.type"/>
            {{item.name}}
            </li>
        </ul> -->
        <!-- 文章组件-->
        <!-- <v-article-item :list="list"/> -->
        <div>
            <div class="article-empty" v-if="list && list.length === 0">暂无收藏文章~</div>
            <div class="article-box" v-else>
                <ul class="article-box" v-if="list && list.length > 0">
                <li class="articles-item" v-for="item in list"  :key="item.id">
                    <div class="articles-item-info" @click.stop="toArticleDetail(item)">
                    <h1 class="articles-item-title">{{item.name}}</h1>
                    <div class="articles-item-description">
                        {{item.remark}}
                    </div>
                    <!-- <ul class="articles-item-intro">
                        <li class="articles-item-category" v-if="item.category">
                        {{item.category.name}}
                        </li>
                        <li class="articles-item-author">
                        <Icon size="16" type="ios-person-outline" style="color:#f5b4ca"/>
                        {{item.author}}
                        </li>
                        <li class="articles-item-browse">
                        <Icon size="16" type="ios-eye-outline" style="color:#f5b4ca"/>
                        {{item.browse}}
                        </li>
                    </ul> -->
                    </div>
                    <div class="articles-images">
                        <div class="logo">
                            <div class="logo-box">
                            <span
                                style="font-family: fantasy; font-weight: 500; color: #edc940;font-size:20px"
                                >FITBLOG</span
                            >
                            <Button @click="openModel(item)" type="text" style="margin-top:20px;border:1px solid #fff;">修改收藏</Button>
                            </div>
                        </div>
                    </div>
                </li>
                </ul>
            </div>
        </div>
        <div class="page" >
            <Page :total="page.total"
                :page-size="page.per_page"
                :current="page.current_page" show-total
                @on-change="handlePage" />
        </div>
        </article>
        <Modal
            v-model="modal1"
            title="收藏"
            @on-ok="ok"
            @on-cancel="cancel">
            <Form ref="article" :model="article" :rules="ruleInline" :label-width="100">
                <FormItem prop="name" label="收藏夹名称">
                    <Input type="text" v-model="article.name" placeholder="请输入收藏夹名称">
                    </Input>
                </FormItem>
                <FormItem prop="remark" label="收藏夹备注">
                    <Input type="textarea" v-model="article.remark" placeholder="请输入收藏夹备注">
                    </Input>
                </FormItem>
            </Form>
        </Modal>
    </section>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import VArticleItem from '../../components/article-item'
import merge from 'webpack-merge'
import user from '../../api/articles'

export default {
    components: {
        VArticleItem,
    },
    data() { 
        return { 
            currentPage: 1,
            categoryIndex: -1,
            page: {
                total: 0,
                count: 0,
                current_page: 0,
                per_page: 0,
                total_pages: 0,
            },
            list: [],
            modal1: false,
            article: {},
            ruleInline: {
                name: [
                    { required: true, message: '请输入收藏夹名称', trigger: 'blur' }
                ],
                remark: [
                    { required: true, message: '请输入收藏夹备注', trigger: 'blur' },
                ]
            }
        }
    },
    computed: {
        ...mapState({
            category: state => state.category.categoryList
        })
    },
    created() {
        this.getArticle()
    },
    methods: { 
        openModel(val) { 
            this.article = this._.cloneDeep(val)
            this.modal1 = true
        },
        ok () {
            this.updateRemark()
        },
        async updateRemark() { 
            try{ 
                const { name, remark } = this.article
                if(!name) return this.$Message.error('请输入收藏夹名称')
                if(!remark) return this.$Message.error('请输入收藏夹备注')
                const { data : res } = await user.updateLove({
                    id: this.article.id,
                    name,
                    remark
                })
                if(res.code !== 200) return this.$Message.error('系统繁忙')
                this.modal1 = false
                this.getArticle()
            }catch(e) { 
                console.log(e);
            }
        },
        cancel () {
            this.$Message.info('关闭对话框');
        },
        ...mapActions({
            getArticleList: 'articles/list',
            getCategoryList: 'category/list'
        }),
        // 获取所有文章
        getAllArticle() {
            this.$router.replace('/article-list')
            this.currentPage = 1
            this.getArticle()
            this.categoryIndex = -1
        },
        async getArticle() {
            const params = {
                page: this.currentPage,
                category_id: this.$route.query.category_id,
                keyword: this.$route.query.keyword,
                user_id: localStorage.userid,
                status: 1
            }
            const r = await user.love(params)
            await this.getCategoryList()
            this.list = r.data.data.data
            this.page = r.data.data.meta
        },
        // 切换分类下的文章
        changCategory(id, index) {
            this.currentPage = 1
            if (this.categoryIndex !== index) {
            this.$router.replace({
                query: merge(this.$route.query, {
                category_id: id
                })
            })
            this.categoryIndex = index
            this.getArticle()
            }
        },
        // 切换分页
        handlePage(page) {
            this.$router.replace({
            query: merge(this.$route.query, {
                page
            })
            })
            this.currentPage = page
            this.getArticle()
        },
      toArticleDetail(item) {
          this.$router.push('/article/detail?id=' + item.article_id)
      }
    }
}
</script>

<style scoped lang="less">
  .author {
    box-sizing: border-box;
    width: @window-Width;
    min-height: 80vh;
    margin: 24px auto;
    overflow: hidden;
    padding-bottom: 24px;
    background-color: #fff;
    border-radius: 6px;
  }
  .article-list {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 1px 2px 3px #f0f0f0;
    background: #fff;
  }

  @media screen and (min-width: 200px) and (max-width: 750px) {
    .articles {
      width: 100%;
    }

    .article-list {
      margin-right: 0;
    }
  }
  .category {
    width: 100%;
    overflow: hidden;
    overflow-x: auto;
    height: 64px;
    line-height: 64px;
    display: flex;
    border-bottom: 1px solid #f0f0f0;
  }

  .category-item {
    margin-left: 32px;
    cursor: pointer;
    color: #515a6e;
    font-size: 16px;
    font-weight: normal;

    &:hover {
      color: #f5b4ca;
    }
  }

  .category-item-active {
    color: #f5b4ca;
  }
  .article-empty {
    text-align: center;
    padding: 32px 0;
    color: #515a6e;
    font-size: 16px;
  }
  .articles-item {
    cursor: pointer;
    padding: 32px;
    display: flex;
    border-bottom: 1px solid #f6f6f6;
    transition: 0.12s ease-in;

    &:hover {
      background: #f6f6f6;
    }

    &:hover .articles-item-title {
      color: #2d8cf0;
    }
  }

  .articles-item-info {
    flex: 1;
  }

  .articles-item-title {
    color: #17233d;
    font-size: 26px;
    font-weight: 500;
  }

  .articles-item-description {
    color: #808695;
    font-size: 18px;
    padding: 24px 0;
  }

  .articles-item-intro {
    display: flex;
    align-items: center;
  }

  .articles-item-intro li {
    display: flex;
    align-items: center;
    margin-right: 32px;
    font-size: 16px;
    color: #9ea7b4;
    white-space: nowrap;
  }

  .articles-item-intro .articles-item-category {
    padding: 5px 32px;
    font-size: 16px;
    color: #f5b4ca;
    border-radius: 96px;
    background: rgba(51, 119, 255, .1);
  }

  .articles-images {
    width: 100px;
    margin-left: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    & img {
      width: 100%;
      border-radius: 6px;
    }
  }
</style>